<template>
  <div class="outer-box">
    <div class="left">
      <div class="app-name">微尼赢供应链管理</div>
      <div class="back">欢迎回来!</div>
      <div class="back-work">让我们回到你的工作上吧</div>
      <div class="form">
        <div class="inp">
          <input type="text" class="input-tt" v-model="userName" />
        </div>
        <div class="inp">
          <input
            :type="!view ? 'password' : 'text'"
            class="input-tt"
            v-model="password"
            @keyup.enter="login"
          />
          <el-icon class="view" size="20px" color="#919191" @click="canView" v-if="view"
            ><View
          /></el-icon>
          <el-icon class="view" size="20px" color="#919191" @click="canView" v-else
            ><Hide
          /></el-icon>
        </div>
      </div>
      <div class="rember">
        <el-checkbox v-model="checked2" label="记住我 " />
      </div>
      <div class="login" @click="login">登录</div>
      <div class="bottom">
        <div>Copyright © 2023 青岛迦迪欧尚贸易有限公司 All Rights Reserved.</div>
        <div>鲁ICP备2023033656号-2 | 鲁公网安备37020302372217号</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import api from "@/api/system/user";
import { ElMessage } from "element-plus";
import router from "@/router";
import store from "store2";

const checked2 = ref(false);

const view = ref(false);

// 用户登录
const userName = ref("");
const password = ref("");

onMounted(() => {
  if (store.get("user")) {
    userName.value = store.get("user").userName;
    password.value = store.get("user").password;
    checked2.value = true;
  }
});

async function login() {
  if (!userName.value.length) {
    ElMessage.warning("请填写账号");
    return;
  }
  if (!password.value.length) {
    ElMessage.warning("请填写密码");
    return;
  }
  const res = await api.login({
    userName: userName.value,
    password: password.value,
  });
  console.log(res);
  store.set("Authorization", res);
  if (checked2.value) {
    store.set("user", {
      userName: userName.value,
      password: password.value,
    });
  } else {
    store.set("user", null);
  }
  ElMessage.success("登录成功");
  router.replace({ path: "/home" });
}

function canView() {
  view.value = !view.value;
}
</script>

<style scoped lang="scss">
.outer-box {
  background-color: #fff;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-self: center;
}

.left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  justify-content: center;
  position: relative;
  width: 100%;
  .app-name {
    font-size: 30px;
    font-weight: bold;
    position: relative;
    padding-bottom: 15px;
    &::after {
      display: block;
      border-bottom: #4b68ff solid 6px;
      width: 90px;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
  }
  .form {
    width: 500px;
    margin-top: 6px;
    .inp {
      border-radius: 10px;
      border: #dfdfdf 1px solid;
      height: 50px;
      margin-top: 30px;
      position: relative;
      .input-tt {
        height: 50px;
        width: 450px;
        text-indent: 15px;
        background-color: transparent;
        box-sizing: border-box;
      }
      .view {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto 15px;
        cursor: pointer;
        user-select: none;
      }
      &::after {
        content: "账号";
        background-color: red;
        padding: 5px;
        background-color: #fff;
        font-size: 12px;
        color: #919191;
        position: absolute;
        top: -10px;
        left: 15px;
      }
      &:last-child:after {
        content: "密码";
        background-color: red;
        padding: 5px;
        background-color: #fff;
        font-size: 12px;
        color: #919191;
        position: absolute;
        top: -10px;
        left: 15px;
      }
    }
  }
  .back {
    font-size: 35px;
    font-weight: bold;
    margin-top: 20px;
  }
  .back-work {
    font-size: 13px;
    color: #868686;
    margin-top: 15px;
  }
  .login {
    width: 500px;
    background-color: #4b68ff;
    color: #fff;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
  }
  .rember {
    display: flex;
    justify-content: left;
    width: 500px;
  }
  .bottom {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    bottom: 30px;
    color: #b1b1b1;
    height: 30px;
    font-size: 12px;
  }
}

.right {
  .right-img {
    height: 100%;
    width: 600px;
  }
}

input[type="password"]::-ms-reveal {
  display: none;
}
input[type="password"]::-ms-clear {
  display: none;
}
input[type="password"]::-o-clear {
  display: none;
}
</style>
